<template>
  <h2>solt组件</h2>
  <div class="box">
    <!-- 具名插槽 -->
    <div class="left">
      <slot name="left"></slot>
    </div>

    <!-- 匿名(默认)插槽+作用域插槽+条件插槽 -->
    <div class="middle" v-if="$slots.default">
      <slot name="default" :text="message" :count="666"></slot>
    </div>

    <!-- 具名插槽+具名作用域插槽 -->
    <div class="right">
      <slot name="right" :text="car"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const message = ref("hello");
const car = ref("🚗");
</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: rgb(215, 244, 255);
}
</style>